<template>
    <div>
        <div>
            <div style="margin:15px 0;padding:20px;background:#fff;border:1px solid #ddd">
                <el-row :gutter="24">
                    <el-col :span="7">
                        <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                            <div class="el-input-group__prepend" tabindex="-1">开始时间</div>
                            <el-date-picker
                                class="el-cascader-margin w-100p"
                                v-model="value1"
                                type="date"
                                placeholder="开始时间">
                            </el-date-picker>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                            <div class="el-input-group__prepend" tabindex="-1">结束时间</div>
                            <el-date-picker
                                class="el-cascader-margin w-100p"
                                v-model="value1"
                                type="date"
                                placeholder="结束时间">
                            </el-date-picker>
                        </div>
                    </el-col>
                    <el-col :span="7" class="text-left">
                        <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                            <el-button type="text">今天</el-button>
                            <el-button type="text">7天</el-button>
                            <el-button type="text">15天</el-button>
                            <el-button type="text">30天</el-button>
                        </div>
                    </el-col>
                    <el-col :span="3" class="text-left">
                            <el-button v-if="isUnfurl" type="text" @click="unfurl"><i class="el-icon-arrow-down"></i>更多筛选</el-button>
                            <el-button v-else type="text" @click="unfurl"><i class="el-icon-arrow-up"></i>收起筛选</el-button>
                    </el-col>
                </el-row>
                <el-row style="margin-top:20px" :gutter="24" v-show="!isUnfurl">
                    <el-col :span="7">
                        <div>
                            <el-input v-model="input"  size="medium" @keyup.enter.native="keyDown($event)" placeholder="请输入交班人" :maxlength="20">
                                <template slot="prepend">交班人</template>
                            </el-input>
                        </div>
                    </el-col> 
                    <el-col :span="7">
                        <div class="el-input el-input-group el-input-group--prepend">
                            <div class="el-input-group__prepend">交班类型</div>
                            <el-select v-model="supplier" filterable placeholder="请选择交班类型" size="medium" class="w-100p">
                            <el-option
                                v-for="item in suppliers"
                                :key="item.id"
                                :label="item.name"
                                :disabled="item.state!='NORMAL'"
                                :value="item.id">
                            </el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div class="el-input el-input-group el-input-group--prepend">
                            <div class="el-input-group__prepend">交班状态</div>
                            <el-select v-model="supplier" filterable placeholder="请选择交班状态" size="medium" class="w-100p">
                            <el-option
                                v-for="item in suppliers"
                                :key="item.id"
                                :label="item.name"
                                :disabled="item.state!='NORMAL'"
                                :value="item.id">
                            </el-option>
                            </el-select>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="24" style="margin-top:20px;margin-bottom:20px">
                    <el-col :span="14">
                        <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                            <div class="el-input-group__prepend" tabindex="-1">门店</div>
                            <el-cascader placeholder="请选择门店" class="el-cascader-margin w-100p"  size="medium"
                                        :options="treeData"
                                        :show-all-levels="false"
                                        change-on-select>
                            </el-cascader>
                        </div>
                    </el-col>
                    <el-col :span="10" class="text-left">
                        <div>
                            <el-button type="primary"  size="medium" class="btn-info"   icon="el-icon-search"  @click="search">搜索</el-button>
                            <el-button type="primary" size="medium" class="btn-warning" style="margin-left: 1px"   icon="el-icon-refresh" @click="cleanSearch">重置</el-button>
                            <el-button type="primary" size="medium" class="btn-warning" style="margin-left: 1px"   icon="el-icon-refresh" @click="cleanSearch">导出</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <el-row style="padding:30px 0;margin:15px 0;border:1px solid #ddd;background:#fff">
                <el-col :span="8" style="border-right:1px solid #ccc">
                    <div>
                        <div>数量合计(个)</div>
                        <div style="font-size:17px">0</div>
                    </div>
                </el-col>
                <el-col :span="8" style="border-right:1px solid #ccc">
                    <div>
                        <div>应收合计(元)</div>
                        <div style="font-size:17px">0.00</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div>
                        <div>实收合计(元)</div>
                        <div style="font-size:17px">0.00</div>
                    </div>
                </el-col>
            </el-row>
            <div style="padding:20px 10px;margin:15px 0;border:1px solid #ddd;background:#fff">
                <div class="text-left" style="margin-bottom:20px">
                        <el-button type="primary"  size="medium" class="btn-info"   icon="el-icon-search">导出</el-button>
                </div>            
                <el-row :gutter="20">
                    <el-col :span="24">
                    <el-table
                        v-loading="loading"
                        :data="tableData"
                        :border="true"
                        style="width: 100%">
                        <el-table-column
                        type="index"
                        width="50">
                        </el-table-column>
                        <el-table-column
                                label="菜品名称">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="菜品分类">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="菜品原价">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="售卖数量"
                                sortable>
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="菜品数量明细">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="应收合计"
                                sortable>
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="实收合计"
                                sortable>
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="成本均价">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="成本合计">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                :render-header="beforeTip">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                :render-header="afterTip">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    </el-col>
                </el-row>
                <br>
                <div class="block">
                    <el-row>
                        <el-col :span="24" class="text-right">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="pageSizes"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
  data() {
    return {
      isUnfurl: true,
      pageSizes: window.pageSizes, //所有可选择的条数
      pageSize: window.pageSize, //控制一页显示的条数
      total: 10, //总条数
      input: "",
      currentPage: 1,
      addShow: false
    };
  },
  methods: {
    beforeTip: function(h, { column, $index }) {
      return (
        <el-tooltip class="tooltip" effect="dark" placement="top">
          <span slot="content">
            折前毛利率=（菜品应收合计-成本合计）/菜品应收合计
          </span>
          <span>
            折前毛利率
            <i class="el-icon-question" style="color:blue;font-size:15px" />
          </span>
        </el-tooltip>
      );
    },
    afterTip: function(h, { column, $index }) {
      return (
        <el-tooltip class="tooltip" effect="dark" placement="top">
          <span slot="content">
            折后毛利率=（菜品实收合计-成本合计）/菜品实收合计
          </span>
          <span>
            折后毛利率
            <i class="el-icon-question" style="color:blue;font-size:15px" />
          </span>
        </el-tooltip>
      );
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    addSuccess(item) {
      this.addShow = false;
      this.initData();
    },
    addClose() {
      this.addShow = false;
    },
    unfurl() {
      if (this.isUnfurl) {
        this.isUnfurl = false;
      } else {
        this.isUnfurl = true;
      }
    }
  }
};
</script>

<style scoped>
</style>
